<template>
	<div>
		<div class="header">
			<aside class="head1" v-show="token==null">
				<p>您未登录,</p>
				<p style="color: #d80606;;">前往登录&nbsp;&nbsp;&nbsp;</p>
				<aside class="dl">
					<i class="el-icon-caret-right"></i><router-link to="/adminlogin">pc登录页</router-link>
					<i class="el-icon-caret-right"></i><router-link to="/mobilelogin">手机登录页</router-link>
				</aside>
			</aside>
			<aside class="head1" v-show="token!=null">
				<img class="myhead" :src="`http://127.0.0.1/api/public/showimg/${img}`" />&nbsp;&nbsp;&nbsp;
				<p>{{uname}},欢迎您</p>
			</aside>
			<aside class="head2">
				<p>zc</p>
			</aside>
			<aside class="head3">
				<button @click="btn()">退出</button>
			</aside>
		</div>
		<div class="body">
			<div class="b_head1">
				<aside>
				</aside>
				<aside class="sele">
					<input class="sear" type="search" required placeholder="请输入书名 作者 出版社" />
					<input class="sub" type="submit" value="搜索" />
				</aside>
				<aside>
				</aside>
			</div>
			<div class="b_head2">
				<div class="head22">
					<aside class="left">
						<el-table :data="typelist" height="300" border
							style="margin: 50px auto;border-radius:10px;width: 300px;height: 350px;">
							<el-table-column prop="name" label="猜您要看" fixed width="300">
							</el-table-column>
						</el-table>
					</aside>
					<aside class="banner2">
						<el-carousel :interval="5000" arrow="always" height='300px'>
							<el-carousel-item v-for="item in HotBanner" :key="item.id">
								<img :src="`http://127.0.0.1/api/public/showimg/${item.picture}`">
							</el-carousel-item>
						</el-carousel>
					</aside>

					<aside class="new">
						<el-table :data="bannerlist" height="300" border
							style=" margin: 50px auto;border-radius:10px;width: 300px;height: 350px;">
							<el-table-column prop="memo" label="特别推荐" fixed width="300">
							</el-table-column>
						</el-table>
					</aside>
				</div>
				<!-- <div style="border: 5px white solid;height: 1px;"></div> -->

			</div>
			<div class="title" style="text-align: center;color:#282b33">
				<h2>新片上映</h2><br />
			</div>
			<div class="b_head3">
				<aside class="head33">
					<ul>
						<li v-for="(item,index) in FilterList" :key="item.id">
							<router-link :to="`/mobile/bookdetail/${item.id}`" :key="item.id"
								v-if="(item.hot!=0 && index<6) ||(item.price!=0&&index<9)">
								<img :src="`http://127.0.0.1/api/public/showimg/${item.picture}`" />
								<h3>{{item.name}}</h3>
								<span v-show="item.price !=0">￥{{item.price.toFixed(2)}}</span>
								<span v-show="item.hot !=0">热门:{{item.hot}}</span>
							</router-link>
						</li>
					</ul>
				</aside>

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
				uname: window.localStorage.getItem('name'),
				img: window.localStorage.getItem('img'),
				token: window.localStorage.getItem('token'),
				typelist: [],
				hotlist: [],
				bannerlist: []

			}
		},
		methods: {
			btn() {
				this.token = null;
			},
			findNew() {
				console.log('wryyynewww');
				this.$get("/api/public/findHot/1/4").then((resp) => {
					console.log(resp.data);
					console.log(resp.data.data);
					this.bannerlist = resp.data.data;
					console.log(this.bannerlist);
				})
			},
			findType() {
				console.log('wryyynewww');
				this.$get("/api/public/type/findAll2").then((resp) => {
					console.log(resp.data);
					console.log(resp.data.data);
					this.typelist = resp.data.data;
					console.log(this.typelist);
				})
			},
			findHot() {
				console.log('wryyy');
				this.$get("/api/adm/hot/findAll").then((resp) => {
					console.log(resp.data);
					console.log(resp.data.data);
					this.hotlist = resp.data.data;
					console.log(this.hotlist);
				})
			},
		},
		mounted() {
			this.findNew();
			this.findType();
			this.findHot();
		},
		computed: {
			HotBanner() {
				this.bannerlist.sort((a1, a2) => {
					return a2.hot - a1.hot
				})
				//forEach/for..in/for..of: 都是可以在需要限制输出的数据数量模块使用
				//map：基本确定不会更改数组的长度，只不过数据的内容发生格式化改变
				let arr = [];
				this.bannerlist.forEach((item, i) => {
					if (i < 4) {
						arr.push(item)
					}
				})
				return arr;
			},
			FilterList() {
				let filters = this.hotlist.map((item) => {
					console.log(item);
					return {
						id: item.id,
						name: item.memo ? item.memo : item.name,
						picture: item.picture ? item.picture : item.pic,
						price: !item.price ? 0 : item.price,
						hot: item.hot ? item.hot : 0
					}
				});
				console.log(filters);
				filters.sort((a1, a2) => {
					return this.proptitle == '热门推荐' ? a2.hot - a1.hot : this.proptitle == '新书上市' ? a2.id - a1.id :
						a1.id - a2.id;
				})
				return filters;
			}
		}
	}
</script>

<style>
	.header {
		background-color: #282b33;
		height: 56px;
		display: flex;
		justify-content: space-between;
	}

	.body .sele {
		display: flex;
		border: #1e9f9d 2px solid;
		border-radius: 15px;
	}

	.b_head1,
	.b_head2 {
		margin: 10px auto;
		display: flex;
		justify-content: space-between;
	}

	.b_head1 input {
		line-height: 3px;
		height: 30px;
		color: #ffffff;
		background-color: #1e9f9d;
		font-size: 1em;
		border-radius: 10px;
		border: none;
	}

	.b_head1 .sear {
		border: none;
		width: 250px;
		height: 30px;
		border-color: #1e9f9d;
		background-color: unset;
		color: #282b33;
	}

	.sear:hover {}

	.head1 {
		color: #ffffff;
		margin: 15px auto;
		display: flex;
	}

	.head1 img {
		height: 30px;
		width: 30px;
		border-radius: 50%;
	}

	.b_head2 {
		background-color: #282b33;
		height: 400px;
		width: 100%;
		justify-content: center;

	}

	.b_head2 .head22 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.left,
	.banner2,
	.new {
		margin-left: 80px;
		margin-right: 80px;
	}

	.banner2 {
		width: 500px;
		height: 300px;
		margin: 50px auto;
	}

	.banner2 img {
		width: 500px;
		height: 100%;
	}

	/* 因为（用了别人的样式）找不到样式，所以我们使用：穿刺（CSS用于修改固定样式的操作） */
	.banner2 .el-carousel /deep/ .el-carousel__button {
		height: 5px !important;
	}

	.banner2 .el-carousel /deep/ .is-active .el-carousel__button {
		background-color: #a68b5b !important;
	}

	.dl i,
	a {
		color: #009688;
	}

	.head2,
	.head3 {
		color: #009688;
		margin: 15px auto;
	}

	.head3 button {
		border: none;
		background-color: #282b33;
		color: #c38d35;
	}

	.b_head3 {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #282b33;
	}

	.b_head3 ul {
		display: flex;
		flex-wrap: wrap;
		margin: 50px auto;
	}

	.b_head3 li {
		margin-left: 80px;
		text-align: center;
		height: 300px;
		width: 200px;
		border-radius: 3px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.b_head3 li:hover {
		transform: scale(1.2);
	}


	.b_head3 img {
		height: 220px;
		width: 200px;
		border-radius: 3px;
		transition: all 0.6s;
		cursor: pointer;
		justify-content: center;
	}

	.head33 {
		
	}

	.el-table__body-wrapper::-webkit-scrollbar {
		width: 0;
		background: rgba(213, 215, 220, 0.3);
		border: none;
	}

	.el-table th.gutter {
		display: none;
		width: 0
	}

	.el-table colgroup col[name='gutter'] {
		display: none;
		width: 0;
	}

	.el-table__body {
		width: 100% !important;
	}
</style>